<template>
	<div class="dialog-root">
		<!-- <el-form label-position="right" label-width="140px" :model="formLabelAlign" :rules="rules" ref="formLabelAlign"> -->
		<!-- @input="formLabelAlign.acc = $setMaxLength(formLabelAlign.acc, 40)" -->
		<el-form label-position="right" label-width="140px" :model="formLabelAlign" ref="formLabelAlign" :rules="rules">
			<el-form-item :label="$t('message.userPageTable.userId')" prop="acc">
				<el-input v-model="formLabelAlign.acc" size="small" class="orange"></el-input>
			</el-form-item>
			<el-form-item :label="$t('message.userPageTable.uname')" prop="checkName">
				<el-input v-model="formLabelAlign.name" size="small" autocomplete="off" class="orange"></el-input>
			</el-form-item>
			<el-form-item :label="$t('message.userPageTable.paw')" prop="pass">
				<el-input v-model="formLabelAlign.pwd" size="small" type="password" autocomplete="off" show-password
					class="orange"></el-input>
			</el-form-item>
			<el-form-item :label="$t('message.userPageTable.confirmPsd')" prop="checkPass">
				<el-input v-model="formLabelAlign.checkPass" size="small" type="password" show-password
					autocomplete="new-password" class="orange"></el-input>
			</el-form-item>

			<el-form-item :label="$t('message.userPageTable.email')">
				<el-input v-model="formLabelAlign.email" size="small"></el-input>
			</el-form-item>

			<el-form-item :label="$t('message.userPageTable.userType')" prop="checkAccType">
				<el-select v-model="formLabelAlign.accType" size="small" style="width: 100%" :disabled="accTypeFlag"
					@change="MargFn" class="orange">
					<el-option v-for="item in accTypeList" :key="item.val" :label="item.label"
						:value="item.val"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="担当部署">
				<el-select size="small" style="width: 100%" v-model="formLabelAlign.responsible">
					<el-option v-for="item in angeList" :key="item.key" :label="item.label" :value="item.key">
					</el-option>
				</el-select>
			</el-form-item>
			<!-- <el-form-item :label="$t('message.userPageTable.mobile')">
				<el-input v-model="formLabelAlign.mobile" size="small"></el-input>
			</el-form-item> -->

			<!-- 分割线 -->
			<div class="divider" style="margin: 10px 0" />
			<div v-for="item in formLabelAlign.permissList" :key="item.label" v-if="item.isShow">
				<el-form-item :label="item.title">
					<el-select v-model="item.permission" size="small" style="width: 100%" :disabled="!item.isEnabled" v-if="item.isAlwaysShow">
						<el-option :value="2" :label="$t('message.userManageView.radio_title_0')"></el-option>
						<el-option :value="1" :label="$t('message.userManageView.radio_title_1')"></el-option>
					</el-select>
					<el-select v-model="item.permission" size="small" style="width: 100%" :disabled="!item.isEnabled" v-if="!item.isAlwaysShow">
						<el-option :value="1" :label="$t('message.userManageView.radio_title_4')" />
						<el-option :value="2" :label="$t('message.userManageView.radio_title_5')" />
					</el-select>
				</el-form-item>
			</div>
		</el-form>
		<span slot="footer" class="dialog-footer">
			<el-button size="small" @click="cancelClick()">{{
				$t("message.public.cancel")
			}}</el-button>
			<el-button type="primary" size="small" @click="saveData()">{{
				$t("message.public.confirmD")
			}}</el-button>
		</span>
	</div>
</template>

<script>
import { getLocalStorage } from "@/utils/storage";
import { getUser, delUser, addUser, getEnvSec } from "@/api/api";

export default {
	data() {
		var validatePass = (rule, value, callback) => {
			if (
				!/^(?![A-Za-z]+$)(?![A-Z\d]+$)(?![A-Z\W]+$)(?![a-z\d]+$)(?![a-z\W]+$)(?![\d\W]+$)\S{6,}$/.test(
					this.formLabelAlign.pwd
				)
			) {
				callback(
					new Error(this.$t("message.userPageTable.rules.checkPsd"))
				);
			} else {
				if (
					this.formLabelAlign.pwd !== "" &&
					/^(?![A-Za-z]+$)(?![A-Z\d]+$)(?![A-Z\W]+$)(?![a-z\d]+$)(?![a-z\W]+$)(?![\d\W]+$)\S{6,}$/.test(
						this.formLabelAlign.pwd
					)
				) {
					this.$refs.formLabelAlign.validateField("checkPass");
				}
				callback();
			}
		};
		var validatePass2 = (rule, value, callback) => {
			if (value !== this.formLabelAlign.pwd) {
				callback(
					new Error(
						this.$t("message.userPageTable.rules.checkPsdTip")
					)
				);
			} else {
				callback();
			}
		};

		var checkMobile = (rule, value, callback) => {
			if (
				!/^(((\\+\\d{2}-)?0\\d{2,3}-\\d{7,8})|bai((\\+\\d{2}-)?(\\d{2,3}-)?([1][3,4,5,7,8][0-9]\\d{8})))$/.test(
					this.formLabelAlign.mobilex
				)
			) {
				callback(
					new Error(
						this.$t("message.userPageTable.rules.checkMobile")
					)
				);
			} else {
				callback();
			}
		};

		var checkEmail = (rule, value, callback) => {
			if (
				!/^([A-Za-z0-9_+-.])+@([A-Za-z0-9\-.])+\.([A-Za-z]{2,22})$/.test(
					this.formLabelAlign.email
				)
			) {
				callback(
					new Error(this.$t("message.userPageTable.rules.checkEmail"))
				);
			}
		};
		var checkAcc = (rule, value, callback) => {
			if (this.formLabelAlign.acc == "") {
				callback(this.$t("message.userPageTable.rules.checkUserName"));
			}
		};
		var checkName = (rule, value, callback) => {
			if (this.formLabelAlign.name == "") {
				callback(
					new Error(this.$t("message.userPageTable.rules.checkName"))
				);
			}
		};
		var checkAccType = (rule, value, callback) => {
			if (this.formLabelAlign.accType == "") {
				callback(
					new Error(
						this.$t("message.userPageTable.rules.checkUserType")
					)
				);
			}
		};
		return {
			angeList: [],
			formLabelAlign: {
				id: "",
				pwd: "",
				name: "",
				sex: "",
				age: 0,
				idNumber: "",
				mobile: "",
				email: "",
				createTime: "",
				creater: getLocalStorage("userID"),
				acc: "",
				accType: null,
				type: "",
				modifyTime: "",
				modifier: getLocalStorage("userID"),
				checkPass: "",
				responsible: 0,
				permissList: [],

			},
			accTypeList: [
				{
					label: this.$t("message.userPageTable.admin"),
					val: 1,
				},
				{
					label: this.$t("message.userPageTable.ordinaryUsers"),
					val: 2,
				},
			],

			accTypeFlag: false,
			rules: {
				acc: [{ validator: checkAcc, trigger: "change", required: true }],
				pass: [
					{
						validator: validatePass,
						trigger: "change",
						required: true,
					},
				],
				checkPass: [
					{
						validator: validatePass2,
						trigger: "change",
						required: true,
					},
				],
				checkMobile: [{ validator: checkMobile, trigger: "change" }],
				checkEmail: [
					{ validator: checkEmail, trigger: "change", required: true },
				],
				checkName: [
					{ validator: checkName, trigger: "change", required: true },
				],
				checkAccType: [
					{
						validator: checkAccType,
						trigger: "change",
						required: true,
					},
				],
			},
		};
	},

	watch: {
		formLabelAlign: {
			handler(nVal, oVal) {

				console.log(document.getElementsByClassName('el-form-item__error'));
				setTimeout(() => {
					var divS = document.getElementsByClassName('el-form-item__error');
					// if(divS.length == 0){
					for (let i = 0; i < document.getElementsByClassName('is-required').length; i++) {
						document.getElementsByClassName('is-required')[i].style.height = '40px';
					}
					// 	return
					// }
					for (let i = 0; i < document.getElementsByClassName('is-error').length; i++) {
						if (divS[i].innerHTML) {
							document.getElementsByClassName('is-error')[i].style.height = '67px';
						} else {
							document.getElementsByClassName('is-error')[i].style.height = '40px';
						}
					}
				}, 500);
			},
			immediate: true,
			deep: true,
		},
	},
	methods: {
		async getEnvSecFn() {
			let res = await getEnvSec({});
			this.angeList = res.data.data;
		},
		// 管理员和一般切换进行筛选。。。
		MargFn(e) {
			console.log(e);
			if (e == 1) {
				this.formLabelAlign.permissList.forEach(item => {
					item.permission = item.isAlwaysShow ? 2 : 1;
					item.isEnabled = true;
				})
			}
			if (e == 2) {
				this.formLabelAlign.permissList.forEach(item => {
					item.permission = item.isAlwaysShow ? 1 : 2;
					item.isEnabled = item.isAdmin == 1 ? false : true;
				})
			}
		},
		saveData() {
			
			this.formLabelAlign.ConfPwd = this.formLabelAlign.checkPass;
			var dto = {
				id: this.formLabelAlign.id,
				pwd: this.formLabelAlign.pwd,
				confPwd: this.formLabelAlign.checkPass,
				name: this.formLabelAlign.name,
				sex: this.formLabelAlign.sex,
				age: this.formLabelAlign.age,
				idNumber: this.formLabelAlign.idNumber,
				mobile: this.formLabelAlign.mobile,
				email: this.formLabelAlign.email,
				createTime: this.formLabelAlign.createTime,
				creater: this.formLabelAlign.creater,
				acc: this.formLabelAlign.acc,
				accType: this.formLabelAlign.accType,
				type: this.formLabelAlign.type,
				modifyTime: this.formLabelAlign.modifyTime,
				modifier: this.formLabelAlign.modifier,
				responsible: this.formLabelAlign.responsible,
				permiss_01: this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_01").permission,
				permiss_02: this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_02").permission,
				permiss_03: this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_03").permission,
				permiss_04: this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_04").permission,
				permiss_05: this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_05").permission,
				permiss_06: this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_06").permission,
				permiss_07: this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_07").permission,
				permiss_08: this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_08").permission,
				permiss_09: this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_09").permission,
				permiss_10: this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_10").permission,
				permiss_11: this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_11").permission,
				permiss_12: this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_12").permission,
				permiss_13: this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_13").permission,
				permiss_14: this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_14").permission,
				permiss_15: this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_15").permission,
				permiss_16: this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_16").permission,
				permiss_17: this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_17").permission,
				permiss_18: this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_18").permission,
				permiss_19: this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_19").permission,
				permiss_20: this.formLabelAlign.permissList.find(l => l.systemName == "Permiss_20").permission,
			}
			addUser(dto).then((res) => {
				console.log(this.formLabelAlign, res);
				if (res.data.code != 0) {
					
					this.$alert(res.data.msg, '', {
						confirmButtonText: 'OK',
						type: 'warning',
					});
					return;
				}
				this.clearInfo();
				this.$emit("addUserSuccess");
				this.$message.success('OK');
			});
		},

		cancelClick() {
			this.clearInfo();
			this.$emit("addUserCancel");
		},

		clearInfo() {
			var localPermissList = this.formLabelAlign.permissList;
			localPermissList[0].permission = null; 
			localPermissList[1].permission = null; 
			localPermissList[2].permission = null; 
			localPermissList[3].permission = null; 
			localPermissList[4].permission = null; 
			localPermissList[5].permission = null; 
			localPermissList[6].permission = null; 
			localPermissList[7].permission = null; 
			localPermissList[8].permission = null; 
			localPermissList[9].permission = null; 
			localPermissList[10].permission = null; 
			localPermissList[11].permission = null; 
			localPermissList[12].permission = null; 
			localPermissList[13].permission = null; 
			localPermissList[14].permission = null; 
			localPermissList[15].permission = null; 
			localPermissList[16].permission = null; 
			localPermissList[17].permission = null; 
			localPermissList[18].permission = null; 
			localPermissList[19].permission = null; 

			this.formLabelAlign = {
				id: "",
				pwd: "",
				name: "",
				sex: "",
				age: 0,
				idNumber: "",
				mobile: "",
				email: "",
				createTime: "",
				creater: getLocalStorage("userID"),
				acc: "",
				accType: null,
				type: "",
				modifyTime: "",
				modifier: getLocalStorage("userID"),
				checkPass: "",
				responsible: 0,
				permissList: localPermissList,
			}
			this.$refs["formLabelAlign"].resetFields();
			this.getEnvSecFn();
		},
	},
	created() { },
	mounted() {
		let userData = getLocalStorage("userData");
		userData.tMenuWeb.forEach(item => {
				var isVisible = false;
				if (item.isAlwaysVisible == 1 || item.isVisible == 1) {
					isVisible = true;
				} else  {
					isVisible = false;
				}

				if (item.label == "-" || item.isAdmin == 2) {
					isVisible = false;
				}

				let tmenu = {
					title: item.label,
					systemName: item.systemName,
					isShow: isVisible,
					isAlwaysShow: item.isAlwaysVisible == 1,
					isEnabled: true,
					permission: 1,
					isAdmin: item.isAdmin,
					};
				this.formLabelAlign.permissList.push(tmenu);
			})
	},
	beforeDestroy() { },
};
</script>

<style lang="scss" scoped>
.dialog-root {
	width: 100%;
	height: 100%;
}

.divider {
	width: 100%;
	height: 1px;
	background-color: #eaeaeb;
}

::v-deep .el-form-item {
	// display: flex;
	// justify-content: flex-start;
	margin-bottom: 0;
}

::v-deep .el-form-item__label {
	// width: 150px !important;
	white-space: nowrap;
}

// ::v-deep .el-input__inner {
// 	width: 100%;
// }

::v-deep .is-error {
	height: 40px;
	transition: all .3s;
}

::v-deep .is-required {
	height: 40px;
	transition: all .3s;
}

.dialog-footer {
	display: block;
	width: 100%;
	text-align: right;
	margin-top: 12px;
}

::v-deep .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
	content: "";
}

::v-deep .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
	content: "";
}

.orange {
	::v-deep .el-input__inner {
		background: rgb(255, 222, 172) !important;
	}
}
</style>